<template>
	<view class="project-list">
		<!-- 导航栏 -->
		<nav-bar title="项目列表" backUrl="/pages/index/index" :isTabbar="true"></nav-bar>
		
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input">
				<text class="search-icon">🔍</text>
				<input 
					type="text" 
					v-model="searchText" 
					placeholder="搜索项目名称" 
					@input="handleSearch"
				/>
			</view>
		</view>
		
		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" @tap="handleSort('comprehensive')">
				<text :class="{ active: currentSort === 'comprehensive' }">综合排序</text>
				<text class="arrow" :class="{ up: showComprehensiveOptions }">▼</text>
			</view>
			<view class="filter-item" @tap="handleSort('price')">
				<text :class="{ active: currentSort === 'price' }">价格</text>
				<text class="arrow" :class="{ up: showPriceOptions }">▼</text>
			</view>
			<view class="filter-item" @tap="handleSort('filter')">
				<text :class="{ active: currentSort === 'filter' }">筛选</text>
				<text class="arrow" :class="{ up: showFilterOptions }">▼</text>
			</view>
		</view>
		
		<!-- 综合排序选项 -->
		<view class="filter-options" v-if="showComprehensiveOptions">
			<view 
				class="option-item" 
				:class="{ active: comprehensiveSort === 'comprehensive' }"
				@tap="selectComprehensiveSort('comprehensive')"
			>综合排序</view>
			<view 
				class="option-item" 
				:class="{ active: comprehensiveSort === 'booking_quantity' }"
				@tap="selectComprehensiveSort('booking_quantity')"
			>销量高</view>
			<view 
				class="option-item" 
				:class="{ active: comprehensiveSort === 'comment_quantity' }"
				@tap="selectComprehensiveSort('comment_quantity')"
			>好评多</view>
		</view>
		
		<!-- 价格选项 -->
		<view class="filter-options" v-if="showPriceOptions">
			<view 
				class="option-item" 
				:class="{ active: priceRange === 'all' }"
				@tap="selectPriceRange('all')"
			>全部</view>
			<view 
				class="option-item" 
				:class="{ active: priceRange === '0-100' }"
				@tap="selectPriceRange('0-100')"
			>100元以下</view>
			<view 
				class="option-item" 
				:class="{ active: priceRange === '100-200' }"
				@tap="selectPriceRange('100-200')"
			>100-200元</view>
			<view 
				class="option-item" 
				:class="{ active: priceRange === '300+' }"
				@tap="selectPriceRange('300+')"
			>300元以上</view>
		</view>
		
		<!-- 筛选选项 -->
		<view class="filter-options" v-if="showFilterOptions">
			<view class="filter-title">服务时长</view>
			<view class="filter-option-group">
				<view 
					class="option-item" 
					:class="{ active: duration === 10 }"
					@tap="selectDuration(10)"
				>10分钟</view>
				<view 
					class="option-item" 
					:class="{ active: duration === 30 }"
					@tap="selectDuration(30)"
				>30分钟</view>
				<view 
					class="option-item" 
					:class="{ active: duration === 60 }"
					@tap="selectDuration(60)"
				>60分钟</view>
			</view>
			<view class="filter-buttons">
				<button class="reset-btn" @tap="resetFilter">重置</button>
				<button class="confirm-btn" @tap="confirmFilter">确定</button>
			</view>
		</view>
		
		<!-- 项目列表 -->
		<view class="project-container">
			<view class="project-items">
				<view class="project-item" v-for="(item, index) in projectList" :key="index" @tap="goToDetail(item)">
					<image class="project-image" :src="item.imgUrls ? item.imgUrls.split(',')[0] : ''" mode="aspectFill"></image>
					<view class="project-info">
						<view class="project-name">{{ item.projectName }}</view>
						<view class="project-desc">{{ item.description }}</view>
						<view class="project-duration">时长: {{ item.duration }}分钟</view>
						<view class="project-price">¥{{ item.price }}</view>
					</view>
					<button class="book-btn" @tap.stop="handleBook(item)">预约</button>
				</view>
			</view>
		</view>
		
		<!-- 无数据提示 -->
		<view class="no-data" v-if="projectList.length === 0">
			<text>暂无项目数据</text>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'

export default {
	components: {
		NavBar
	},
	data() {
		return {
			currentSort: 'comprehensive',
			projectList: [],
			loading: false,
			searchText: '',
			searchTimer: null,
			queryParams: {
				sortField: '',
				sortOrder: '',
				projectName: '',
				minPrice: '',
				maxPrice: '',
				duration: ''
			},
			// 筛选相关
			showComprehensiveOptions: false,
			showPriceOptions: false,
			showFilterOptions: false,
			comprehensiveSort: 'comprehensive',
			priceRange: 'all',
			duration: null
		}
	},
	
	onLoad() {
		this.loadProjectList()
	},
	
	methods: {
		// 处理搜索输入
		handleSearch(e) {
			if (this.searchTimer) {
				clearTimeout(this.searchTimer)
			}
			
			this.searchTimer = setTimeout(() => {
				this.queryParams.projectName = this.searchText
				this.loadProjectList()
			}, 300)
		},
		
		// 加载项目列表
		loadProjectList() {
			if (this.loading) return
			
			this.loading = true
			uni.request({
				url: `${uni.$config.baseUrl}/project/project/listAll`,
				method: 'GET',
				data: this.queryParams,
				success: (res) => {
					if (res.statusCode === 200) {
						const response = res.data
						if (response.code === 200) {
							this.projectList = response.rows || []
						} else {
							uni.showToast({
								title: response.msg || '获取项目列表失败',
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						})
					}
				},
				fail: (err) => {
					console.error('获取项目列表出错：', err)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				},
				complete: () => {
					this.loading = false
				}
			})
		},
		
		// 排序处理
		handleSort(type) {
			// 关闭其他选项
			this.showComprehensiveOptions = false
			this.showPriceOptions = false
			this.showFilterOptions = false
			
			// 切换当前选项
			if (type === 'comprehensive') {
				this.showComprehensiveOptions = !this.showComprehensiveOptions
				this.currentSort = 'comprehensive'
			} else if (type === 'price') {
				this.showPriceOptions = !this.showPriceOptions
				this.currentSort = 'price'
			} else if (type === 'filter') {
				this.showFilterOptions = !this.showFilterOptions
				this.currentSort = 'filter'
			}
		},
		
		// 选择综合排序
		selectComprehensiveSort(type) {
			this.comprehensiveSort = type
			this.showComprehensiveOptions = false
			
			// 设置排序参数
			switch(type) {
				case 'booking_quantity':
					this.queryParams.sortField = 'booking_quantity'
					this.queryParams.sortOrder = 'desc'
					break
				case 'comment_quantity':
					this.queryParams.sortField = 'comment_quantity'
					this.queryParams.sortOrder = 'desc'
					break
				default:
					this.queryParams.sortField = ''
					this.queryParams.sortOrder = ''
			}
			
			this.loadProjectList()
		},
		
		// 选择价格区间
		selectPriceRange(range) {
			this.priceRange = range
			this.showPriceOptions = false
			
			// 设置价格区间参数
			switch(range) {
				case '0-100':
					this.queryParams.minPrice = 0
					this.queryParams.maxPrice = 100
					break
				case '100-200':
					this.queryParams.minPrice = 100
					this.queryParams.maxPrice = 200
					break
				case '300+':
					this.queryParams.minPrice = 300
					this.queryParams.maxPrice = 999999
					break
				default:
					this.queryParams.minPrice = ''
					this.queryParams.maxPrice = ''
			}
			
			this.loadProjectList()
		},
		
		// 选择服务时长
		selectDuration(duration) {
			this.duration = duration
		},
		
		// 重置筛选
		resetFilter() {
			this.duration = null
		},
		
		// 确认筛选
		confirmFilter() {
			this.queryParams.duration = this.duration
			this.showFilterOptions = false
			this.loadProjectList()
		},
		
		// 跳转到项目详情
		goToDetail(project) {
			uni.navigateTo({
				url: `/pages/service-detail/service-detail?id=${project.id}`
			})
		},
		
		// 预约处理
		handleBook(project) {
			uni.navigateTo({
				url: `/pages/service-detail/service-detail?id=${project.id}`
			})
		}
	}
}
</script>

<style lang="scss">
.project-list {
	min-height: 100vh;
	background: #F8F8F8;
	
	.search-box {
		background: #FFFFFF;
		padding: 20rpx;
		position: sticky;
		top: 0;
		z-index: 101;
		
		.search-input {
			display: flex;
			align-items: center;
			background: #F5F5F5;
			border-radius: 32rpx;
			padding: 12rpx 24rpx;
			
			.search-icon {
				margin-right: 12rpx;
				font-size: 28rpx;
				color: #999;
			}
			
			input {
				flex: 1;
				height: 48rpx;
				font-size: 28rpx;
				color: #333;
				
				&::placeholder {
					color: #999;
				}
			}
		}
	}
	
	.filter-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 88rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
		margin-bottom: 20rpx;
		
		.filter-item {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			
			.active {
				color: #00B26A;
			}
			
			.arrow {
				margin-left: 6rpx;
				font-size: 24rpx;
				transition: transform 0.3s;
				
				&.up {
					transform: rotate(180deg);
				}
			}
		}
	}
	
	.filter-options {
		background: #FFFFFF;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		
		.filter-title {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
			font-weight: 500;
		}
		
		.filter-option-group {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -10rpx;
		}
		
		.option-item {
			padding: 16rpx 30rpx;
			background: #F5F5F5;
			border-radius: 30rpx;
			font-size: 26rpx;
			color: #666;
			margin: 10rpx;
			
			&.active {
				background: rgba(0, 178, 106, 0.1);
				color: #00B26A;
			}
		}
		
		.filter-buttons {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			
			.reset-btn, .confirm-btn {
				width: 45%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				font-size: 28rpx;
			}
			
			.reset-btn {
				background: #F5F5F5;
				color: #666;
			}
			
			confirm-btn {
				background: #00B26A;
				color: #FFFFFF;
			}
		}
	}
	
	.project-container {
		padding: 20rpx;
		
		.project-items {
			background: #FFFFFF;
			border-radius: 8rpx;
			
			.project-item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				border-bottom: 1rpx solid #EEEEEE;
				
				&:last-child {
					border-bottom: none;
				}
				
				.project-image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}
				
				.project-info {
					flex: 1;
					
					.project-name {
						font-size: 30rpx;
						color: #333333;
						margin-bottom: 10rpx;
					}
					
					.project-desc {
						font-size: 26rpx;
						color: #666666;
						margin-bottom: 10rpx;
					}
					
					.project-duration {
						font-size: 24rpx;
						color: #999999;
						margin-bottom: 10rpx;
					}
					
					.project-price {
						font-size: 32rpx;
						color: #FF6B00;
						font-weight: bold;
					}
				}
				
				.book-btn {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background: #00B26A;
					color: #FFFFFF;
					font-size: 26rpx;
					border-radius: 30rpx;
					margin-left: 20rpx;
					
					&:active {
						opacity: 0.8;
					}
				}
			}
		}
	}
	
	.no-data {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
	}
}
</style> 